<template>
  <div id="app" class="container mt-5">
    <h1 class="text-center mb-4">Vue + Bootstrap + Axios 示例</h1>

    <button @click="fetchData" class="btn btn-primary mb-3">发送 GET 请求</button>

    <div v-if="loading" class="alert alert-info">加载中...</div>

    <div v-if="error" class="alert alert-danger">{{ error }}</div>

    <div v-if="data">
      <h3>响应数据：</h3>
      <pre class="bg-light p-3 rounded">{{ data }}</pre>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {
      data: null,
      loading: false,
      error: null,
    }
  },
  methods: {
    async fetchData() {
      this.loading = true
      this.error = null
      this.data = null
      try {
        // 以 JSONPlaceholder 为例，这是一个免费的测试 API
        const response = await axios.get('/api/user/profile')
        this.data = response.data
      } catch (err) {
        this.error = '请求失败: ' + err.message
        console.error(err)
      } finally {
        this.loading = false
      }
    },
  },
}
</script>

<style>
/* 可以添加自定义样式 */
</style>